<template>
	<view class="theme-layout">
		<navigator :url="`/pages/ClassList/ClassList?classid=${obj._id}&className=${obj.name}&pageSize=6`" class="box" v-if="!isMore">
			<image class="pic" :src="obj.picurl" mode="aspectFill"></image>
			<view class="mask">{{obj.name}}</view>
			<view class="tab">{{timeDifference(obj.updateTime)}}前更新</view>
		</navigator>
		<navigator url="/pages/Classify/Classify" open-type="reLaunch" class="box more" v-if="isMore">
			<image class="pic" src="../../common/images/wallpaper/preview1.jpg" mode="aspectFill"></image>
			<view class="mask">
				<uni-icons type="more-filled" color="white"></uni-icons>
				<text>更多</text>
			</view>
		</navigator>
		<!-- :classID="obj._id" :className="obj.name" -->
		<!-- ?:title="obj.name -->
	</view>
</template>

<script setup>
	defineProps({
		isMore:{
			type:Boolean,
			default:false
		},
		obj:{
			type:Object,
			default:{
				"name":"匿名",
				"updateTime":1731375896996,
				"picurl":"https://mp-0cb878b7-99ec-44ea-8246-12b123304b05.cdn.bspapp.com/xxmBizhi/20231010/1696900747351_2102.jpg"
			}
		}
	})
	function timeDifference(timestamp) {
		// 示例用法：
		// 假设当前时间是2024年11月19日，您想比较的时间戳是2024年11月18日的时间戳
		// const timestamp = new Date('2024-11-18').getTime();
		// console.log(timeDifference(timestamp));
	    const currentTime = new Date();
	    const targetTime = new Date(timestamp);
	    const difference = currentTime - targetTime;
	
	    // 将毫秒转换为分钟
	    const minutes = Math.floor(difference / 60000);
	    // 将毫秒转换为小时
	    const hours = Math.floor(difference / 3600000);
	    // 将毫秒转换为天
	    const days = Math.floor(difference / 86400000);
	    // 将毫秒转换为月
	    const months = Math.floor(difference / 2628000000);
	
	    if (minutes <= 1) {
	        return '1分钟';
	    } else if (hours <= 1 && minutes > 1) {
	        return `${minutes}分钟`;
	    } else if (days <= 1 && hours > 1) {
	        return `${hours}小时`;
	    } else if (months <= 1 && days > 1) {
	        return `${days}天`;
	    } else if (months <= 3 && days > 31) {
	        return `${months}月`;
	    } else {
	        return "较久以";
	    }
	}
	
</script>

<style lang="scss" scoped>
	.theme-layout
	{
	.box{
		height: 340rpx;
		width: 220rpx;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
		.pic{
			width: 100%;
			height: 100%;
		}
		.mask{
			width: 100%;
			height: 65rpx;
			line-height: 65rpx;
			font-size: 25rpx;
			color: white;
			text-align: center;
			backdrop-filter: blur(15rpx);
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.tab{
			position: absolute;
			top: 0;
			left: 0;
			padding: 0 12rpx 0 5rpx;
			height: 30rpx;
			border-bottom-right-radius: 12rpx;
			font-size: 20rpx;
			text-align: center;
			color: white;
			background-color: #f09a61cf;
		}
	}
	
	.box.more{
		.mask{
			height: 340rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text{
				height: 40rpx;
				padding-bottom: 40rpx;
			}
		}
	}
	
	}
</style>